<template>
  <a-spin :spinning="loading">
    <div class="bg-white">
      <div class="p-20">
        <div class="flex items-center">
          <div class="flex items-center mr-20">
            <span class="flex-none">国家名称：</span>
            <div class="px-10">
              <a-input class="w-300"  :max-length="50"  v-model="name" placeholder="请输入国家名称"/>
            </div>
            <a-button type="primary" class="mx-5" @click="searchHandle">查询</a-button>
            <a-button class="mx-5" @click="resetHandle">重置</a-button>
          </div>
        </div>


        <!--列表数据-->
        <div class="mt-20">
          <a-table :columns="columns" :data-source="pageList" :pagination="false">

          </a-table>

          <!--底部页码-->
          <div class="flex justify-end mt-20 items-center">
            <div class="pr-20">共{{rowCount}}条记录，第{{pageNum}}/{{Math.ceil(rowCount/rowsNum)}} 页</div>
            <a-pagination
                v-model="pageNum"
                show-size-changer
                show-quick-jumper
                :page-size.sync="rowsNum"
                :total="rowCount"
                @showSizeChange="sizeChange"
                @change="pageChange"
            >
            </a-pagination>
          </div>
        </div>

      </div>
    </div>
  </a-spin>
</template>

<script>
  import {
    getPageCityList,
    getAllCountryList,
    create,
    deleteInfo,
    edit,
    getCountryInfo,
    getPageCountryList,
    getPageContinentList
  } from '@/api/geography'

  export default {
    name: 'CountryItem',
    data() {
      return {
        columns: [
          {
            title: '国家代码',
            dataIndex: 'code'
          },
          {
            title: '国家名称',
            dataIndex: 'name'
          },
          {
            title: '国家英文名',
            dataIndex: 'enName'
          },

        ],
        loading: true, // 页面是否在加载中
        pageList: [],// 列表总数据
        name: '', // 城市名称
        code: '', // 城市编码
        pageNum: 1, // 页码
        rowsNum: 10, // 每页的数据
        rowCount: 0 // 总页码数据
      }
    },
    created() {
      this._getPageCountryList() // 获取国家信息列表
    },
    methods: {
      _getPageCountryList() { // 获取国家信息列表
        this.loading = true
        getPageCountryList({
          name: this.name.trim(),
          code: this.code.trim(),
          pageNo: this.pageNum,
          pageSize: this.rowsNum
        }).then((res) => {
          this.pageList = res.items
          this.rowCount = res.rowCount
        }).finally(() => {
          this.loading = false
        })
      },

      searchHandle() { // 搜索
        this.pageNum = 1
        this._getPageCountryList()
      },

      resetHandle() { // 重置
        this.name = ''
        this.code = ''
        this._getPageCountryList()
      },

      sizeChange(pageNum, rowsNum) { // 每页数量变化的时候
        this.pageNum = pageNum
        this.rowsNum = rowsNum
        this._getPageCountryList()
      },

      pageChange(pageNum, rowsNum) {
        this.pageNum = pageNum
        this.rowsNum = rowsNum
        this._getPageCountryList()
      },
    }
  }
</script>

<style scoped>

</style>